<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script src="../asserts/scripts/JQurey3.6.4.js"></script>
    <style>
        #app {
            width: 30%;
            margin: 150px auto;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 30px;
        }
    </style>
</head>
<body>
  <div id="app">
        <h3 style="text-align: center">登录界面</h3>

      <el-form :model="LoginForm" status-icon :rules="LoginFormRules" ref="LoginForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账户" prop="username">
              <el-input prefix-icon="el-icon-user" type="text" v-model="LoginForm.username" ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
              <el-input prefix-icon="el-icon-lock" type="password" v-model="LoginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="checkCode" style="display: inline-block;:inline-false;">
              <el-input prefix-icon="el-icon-message" placeholder="请输入验证码" v-model="LoginForm.checkCode"></el-input>
              <img alt="点击刷新" src='http://localhost:9999/user/getVerifyCode'
                   onclick="this.src='http://localhost:9999/user/getVerifyCode?d='+new Date()*1">
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click.prevent="login()">提交</el-button>
              <el-button @click.prevent="resetForm()">重置</el-button>
          </el-form-item>
      </el-form>
  </div>

  <script>
      let vueApp = new Vue({
          el:"#app",
          data:{
              LoginForm:{
                  username:'',
                  password:'',
                  checkCode:''
              },
              LoginFormRules:{
                  username:[
                      {required:true,message:'账户不能为空',trigger:'blur'}
                  ],
                  password:[
                      {required:true,message:'密码不能为空',trigger:'blur'}
                  ],
                  checkCode:[
                      {required:true,message:'验证码不能为空',trigger:'blur'}
                  ]
              }
          },
          methods:{
              login(){
                  this.$refs.LoginForm.validate((valid)=>{
                      if (!valid) return ;

                      let url = './user/login' ;
                       axios.post(url,this.LoginForm)
                      .then((res)=>{
                          if (res.data.code == 200) {
                              this.$message({
                                  type:"success",
                                  message:res.data.msg,
                                  duration:1000
                              })
                              localStorage.setItem("userInfo",JSON.stringify(res.data.data));
                              location.href = "./index.html"
                          }else {
                              this.$message({
                                  type:"error",
                                  message:res.data.msg,
                                  duration:1000
                              })
                          }
                      })
                  });
              },
              resetForm(){
                  this.$refs.LoginForm.resetFields();
              }
          }
      })
  </script>
</body>
</html>